html,
body {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0;
  margin: 0;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#app {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.game-container {
  display: grid;
  grid-template-columns: repeat(3, 10rem);
  grid-template-rows: repeat(9, 2.5rem);
  user-select: none;
}
.game-container .item {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.game-container .item-1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: #C2185B;
  font-size: 1.6rem;
}
.game-container .item-2 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 5;
  background-color: #D32F2F;
}
.game-container .item-3 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 9;
  background-color: #7B1FA2;
}
.game-container .item-4 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 5;
  grid-row-end: 7;
  background-color: #512DA8;
}
.game-container .item-5 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 7;
  grid-row-end: 9;
  background-color: #303F9F;
}
.game-container .item-6 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 9;
  grid-row-end: 10;
  background-color: #1976D2;
}
.game-container .win {
  background-color: #0f0 !important;
}
.game-container .failure {
  background-color: #f00 !important;
}
.game-container #btnAction,
.game-container #btnSubmit,
.game-container #ins {
  display: inline-block;
  height: 3rem;
  width: 10rem;
  background: none;
  color: #fff;
  border: 1px solid #000;
  border-radius: 0.2rem;
}
.game-container #btnSubmit,
.game-container #ins {
  width: 5rem;
  height: 2rem !important;
}
.game-container #ins {
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  margin-right: 1rem;
}
